<template>
  <div>
    <!-- 表单组件 -->
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="formConfig.rules"
      label-width="100px"
    >
      <el-row :gutter="10">
        <el-col
          v-for="item in formConfig.items"
          :key="item.prop"
          :xl="item.xl"
          :lg="item.lg"
          :md="item.md"
          :sm="item.sm"
          :xs="item.xs"
        >
          <el-form-item :prop="item.prop" :label="item.label + '：'">
            <el-input
              v-if="item.type == 'Text'"
              type="text"
              clearable
              v-model="formModel[item.prop]"
              :placeholder="item.placeholder"
              @keyup.enter="handleSure"
            />
            <el-input
              v-if="item.type == 'Password'"
              type="password"
              clearable
              show-password
              v-model="formModel[item.prop]"
              :placeholder="item.placeholder"
              @keyup.enter="handleSure"
            />
            <el-input
              v-if="item.type == 'Textarea'"
              type="textarea"
              clearable
              v-model="formModel[item.prop]"
              :placeholder="item.placeholder"
            />
            <template v-if="item.type == 'Radio'">
              <el-radio-group
                v-for="i in item.optionList"
                v-model="formModel[item.prop]"
              >
                <el-radio style="margin-right: 20px" :label="i.value">{{
                  i.label
                }}</el-radio>
              </el-radio-group>
            </template>
            <el-date-picker
              v-if="item.type == 'DateAround'"
              v-model="formModel[item.prop]"
              type="date"
              :placeholder="item.placeholder"
              style="width: 100%;"
            />
            <el-select
              v-if="item.type == 'Select'"
              v-model="formModel[item.prop]"
              :style="{ width }"
              clearable
              :placeholder="item.placeholder"
            >
              <el-option
                v-for="i in item.optionList"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </el-select>
            <el-date-picker
              v-if="item.type == 'Date'"
              :style="{ width }"
              v-model="formModel[item.prop]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              clearable
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <ButtonComp :list="formConfig.btnList" @handleClick="handleOption" />

        <!-- <el-button type="primary" @click="handleSure">确定</el-button>
          <el-button @click="handleCancel">取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<!-- vue3 表单组件 -->
<script setup>
import { defineProps, ref, reactive, defineEmits, defineExpose } from "vue";
import ButtonComp from ".//ButtonComp.vue";

let props = defineProps({
  /**
   * 组件宽度
   */
  width: {
    type: String,
    default: () => "100%",
  },
  /**
   * 表单配置
   */
  formConfig: {
    type: Object,
    default: () => {},
  },
});

// 表单ref
let formRef = ref();
// 绑定表单
let formModel = reactive({});
let optionArr = ref([]);

defineExpose({
  formModel,
});

/**
 * 表单按钮
 */
const handleOption = (val) => {
  // console.log(2121, val);
  switch (val.prop) {
    case "sure":
      handleSure();
      break;
    case "cancel":
      handleCancel();
      break;

    default:
      break;
  }
};

const emits = defineEmits(["handleSure", "handleCancel"]);
/**
 * 确定
 */
function handleSure() {
  formRef.value.validate((valid) => {
    if (valid) {
      // console.log("formModel", formModel);
      emits("handleSure", formModel);
    } else {
      return false;
    }
  });
}
/**
 * 取消
 */
function handleCancel() {
  formRef.value.resetFields();
  emits("handleCancel");
}
</script>

<style scoped lang="scss"></style>
